﻿@using FrogFoot.Resources
@model FrogFoot.Areas.Home.Models.CoverageViewModel
@{
    ViewBag.Title = "Coverage";
}

<div class="row">
    <div class="col-xs-12 text-center" style="margin-top: 45px;">
        <img src="~/Content/icons/icon-coverage.png" />
        <h2 style="color: green;">Coverage</h2>
    </div>
</div>

<div class="row">
    <div class="form-group">
        <select id="LocationId" name="LocationId" class="form-control" style="margin: 0 auto;" data-val="true" data-val-required="Select a suburb.">
            <option value="">Select a Suburb</option>
            @foreach (var item in Model.Locations)
            {
                <option value="@item.LocationId" data-code="@item.PrecinctCode">@item.Name</option>
            }
        </select>

        <div class="form-group" style="display: none;">
            <select class="form-control" id="pac-select">
                <option value="">Select Suburb</option>
            </select>
        </div>
    </div>
    <div class="form-group" style="text-align: center">
        <input id="pac-input" class="form-control" type="text" placeholder="Enter Street Address" tabindex="2" style="margin: 0 auto;">
    </div>
</div>

<div class="row form-group">
    <div class="col-xs-12 text-center">
        <div class="form-group" id="map-results"></div>
    </div>
</div>

<!-- Map -->
<div class="col-sm-12">
    <div id="map-canvas" style="width: 100%; height: 600px;"></div>
</div>

@section scripts
{
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=@(Globals.GoogleApiKey)&libraries=places"></script>
    <script src="~/Scripts/map/ftth-embed.min.js"></script>

    <script type="text/javascript">
        $(function() {
            $('#LocationId').change(function () {
                var selectedLoc = $('#LocationId').val();

                var code = $('option:selected', this).data('code');
                var optionIndex = $('#pac-select option').filter(function () {
                    return $(this).data('id') == code;
                }).val();

                $('#pac-select').val(optionIndex).change();

                if (!selectedLoc) {
                    $("#estatesSelect").empty().parent().hide();
                    return;
                }
            });
        })
    </script>
}

